<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="referrer" content="never">
    <script src="{{ asset('js/lib-flexible-min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="{{ asset('js/axios.min.js') }}"></script>
    
    <title>省钱小卖部</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
        }
        
        .box {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .browser-pop {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .openguide {
            display: block;
            width: 7.52rem;
            height: 5.04rem;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 999;
        }
        
        .logoimg {
            display: block;
            height: 7.173333rem;
            height: 5.333333rem;
            margin: 0 auto 0;
        }
        
        .phone,
        .passWord,
        .invitCode,
        .sms-code {
            width: 7.733333rem;
            height: 1.066666rem;
            background: #FFFFFF;
            border-radius: 0.586666rem;
            border: 0.026666rem solid #979797;
            padding-left: 0.533333rem;
            display: flex;
            align-items: center;
            margin: 0 auto 0.266666rem;
        }
        
        .phone {
            margin-top: 0.4rem;
        }
        
        .reg-ipt {
            width: 7.2rem;
            height: 0.96rem;
            display: flex;
            align-items: center;
            outline: 0px;
            border: none;
            font-size: 0.373333rem;
            color:#555555;
        }
        
        .bottom {
            width: 10rem;
            height: 4.533333rem;
            background: #FFE066;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        
        .circle4 {
            width: 10rem;
            height: 0.8rem;
            background: #FFFFFF;
            border-radius: 0 0 50% 50%/0 0 100% 100%;
            border-top: none;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .register {
            width: 7.733333rem;
            height: 1.173333rem;
            background: #333333;
            border-radius: 0.586666rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            font-size: 0.373333rem;
            font-weight: 500;
            position: absolute;
            left: 1.146666rem;
            top: 0;
        }
        
        .downLoad {
            width: 7.733333rem;
            height: 1.173333rem;
            border-radius: 0.586666rem;
            background:url(https://littleshop.oss-cn-beijing.aliyuncs.com/images/wap/wap-download-button-bg.png) no-repeat;
            background-size: cover;
            position: absolute;
            left: 1.146666rem;
            top: 1.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.373333rem;
            font-weight: 600;
            color: #FFFFFF;
            
        }
        
        .agreement {
            display: flex;
            align-items: center;
            padding: 0.266666rem 0 0.533333rem 0;
        }
        
        .agreement-text {
            font-size: 0.373333rem;
            font-size: 0.346666rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 0.373333rem;
            margin-left: 0.133333rem;
        }
        
        .reg-agreement>a,.privacy-agreement>a{
            text-decoration: none;
            color: #E72A2A;
        }
        
        .checkbox-box {
            height: 12px;
            margin-left: 1.066666rem;
            line-height: 14px;
            display: flex;
            align-items: center;
            
        }
        
        label {
            position: relative;
            cursor: pointer;
            font-size: 0.346666rem;
            padding-left: 18px;
            
        }
        
        .checkbox {
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
            -webkit-appearance: none;
            transform: scale(0.6);
            
        }
        
        .checkbox:checked+.show-box {
            background: #333333;
        }
        
        .show-box {
            position: absolute;
            top: -1px;
            left: 0;
            width: 12px;
            height: 12px;
            border-radius: 2px;
            border: 1px solid #333333;
            background: white;
        }
        
        .show-box:before {
            content: '';
            position: absolute;
            top: 1px;
            left: 4px;
            width: 3px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .get-sme-code {
            width: 2.773333rem;
            height: 1.066666rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.373333rem;
            color: #FFFFFF;
            background: #555555;
            border-radius: 0.586666rem;
        }
        
        .sms-ipt {
            width: 4.293333rem;
        }
        
        .sms-code {
            justify-content: space-between;
        }
        
        #snackbar {
            visibility: hidden;
            width: 4rem;
            padding: 0.133333rem;
            height:1.066666rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -2rem;
            background-color:rgba(0,0,0,.7);
            color: #fff;
            text-align: center;
            border-radius:0.266666rem;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom:400px;
            font-size:0.373333rem;
        }
        
        #snackbar.show{
            visibility: visible;
            -webkit-animation: fadein 0.5s;
        }
        
        @-webkit-keyframes fadein {
            from {
                bottom: 0;
                opacity: 0;
            }
            
            to {
                opacity: 1;
            }
        }
        
        .confirm{
            width: 100%;
            height:100%;
            background: rgba(0,0,0,.5);
            position: fixed;
            top:0;
            left:0;
        }
        
        .confirm-content{
            width: 7.733333rem;
            height:5.2rem;
            background: #FFFFFF;
            border-radius: 0.266666rem;
            position: absolute;
            left: 0;
            top:0;
            right:0;
            bottom: 0;
            margin: auto;
        }
        
        .confirm-title{
            width: 100%;
            height: 1.066666rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.426666rem;
            color:#333333;
            font-weight: 600;
            border-bottom: 0.013333rem solid #EEEEEE;
        }
        
        .confirm-text{
            padding: 0.133333rem 0.533333rem;
            height:2rem;
            margin-top: 0.466666rem;
            font-size: 0.4rem;
            color:#333333;
        }
        
        .confirm-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.333333rem;
        }
        
        .confirm-btn>div{
            font-size: 0.4rem;
            text-align: center;
            line-height:1.333333rem;
            width: 50%;
            border-top: 0.013333rem solid #EEEEEE;
        }
        
        .confirm-btn>div:nth-child(1){
            border-right: 0.013333rem solid #EEEEEE;
            color: #999999;
        }
        
        .confirm-btn>div:nth-child(2){
            color: #555555;
            font-weight: 600;
        }
    
    </style>
</head>

<body oncontextmenu="return false" onselectstart="return false">
<div class="box" id="app">
    <img src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/wap/wap-register-head.png" class="logoimg">
    <div class="phone">
        <input type="text" pattern="\d*" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入手机号" v-model="phoneNumber" class="reg-ipt" />
    </div>
    <div class="sms-code">
        <input type="number" placeholder="请输入验证码" v-model="sms_code" class="reg-ipt sms-ipt" />
        <div class="get-sme-code" @click="getVerifyCode()">@{{ showCount == false?'获取验证码':countTime+'秒后重试'}}</div>
    </div>
    <div class="passWord">
        <input type="password" placeholder="请输入至少6位的密码" v-model="password" class="reg-ipt" />
    </div>
    <div class="invitCode">
        <input type="text" v-if="invite_code" v-model="invite_code" readonly="readonly" class="reg-ipt" />
        <input type="text" placeholder="请输入您的邀请码" v-else v-model="invite_code" class="reg-ipt" />
    </div>
    <div class="agreement">
        <div class="checkbox-box">
            <label>
                <input type="checkbox" v-model="agreement" value="agree" @click="handleClick" class="checkbox" />
                我已阅读并同意
                <div class="show-box"></div>
            </label>
        </div>
        <div class="agreement-text">
					<span class="reg-agreement">
						<a href="https://www.littleshop.shop/wap/configs/user/agreement">《注册协议》</a>
					</span>
            <span>和</span>
            <span class="privacy-agreement">
						<a href="https://www.littleshop.shop/wap/configs/user/privacy">《隐私协议》</a>
					</span>
        </div>
    </div>
    
    <div class="bottom">
        <div class="circle4"></div>
        <div class="register" @click="registeNow()">立即注册</div>
        <div class="downLoad" @click="open('{{ cs('app')->android_url }}')" >立即下载</div>
    </div>
    
    <div class="browser-pop" v-if="popshow" @click="hide()">
        <img src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/wap/wap-open-guide.png" class="openguide" mode="">
    </div>
    
    <div class="confirm" @click.self="cancle()" v-if="confirmShow">
        <div class="confirm-content">
            <div class="confirm-title">提示</div>
            <div class="confirm-text">如您有推荐人请填写邀请码，如您没有推荐人可直接注册</div>
            <div class="confirm-btn">
                <div @click.stop="cancle()">填写邀请码</div>
                <div @click.stop="confirm()">直接注册</div>
            </div>
        </div>
    </div>
    
    <div id="snackbar" class="show" v-show="showToast">@{{ msg }}</div>
</div>
<script type="text/javascript">
    
    let base_url = 'https://dev.littleshop.shop/api/v1';
    @if (app()->environment('production')) {
    	base_url = 'https://www.littleshop.shop/api/v1';
    }
    @endif
    
	const service = axios.create({
		baseURL: base_url,
		timeout: 120000
	});
	
	service.interceptors.request.use(config => {
		config.headers['Content-Type'] = "application/json";
		return config
	}, error => {
		Promise.reject(error)
	});
	
	
	service.interceptors.response.use(
		response => {
			const res = response.data;
			return res;
		},error => {
			app.showToast = true;
			app.msg = Object.values(error.response.data.errors)[0][0];
			setTimeout(() => {
				app.showToast = false;
			}, 1000)
			return Promise.reject(error)
		})
	
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]); return null;
	}
	
	let url_invite_code = getQueryString('invite_code');
	
	var app = new Vue({
		el: '#app',
		data: {
			popshow: false,
			phoneNumber: '',
			invite_code:url_invite_code,
			countTime: null,
			showCount: false,
			msg: '',
			showToast: false,
			sms_key: '',
			sms_code: '',
			password: '',
			agreement: true,
			confirmShow:false
		},
		methods: {
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			open(androidUrl) {
				if (this.isWeiXinLogin()) {
					this.popshow = true;
				} else {
					this.popshow = false;
					var u = navigator.userAgent;
					var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
					var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
					if (isiOS) {
						window.location.href = 'https://apps.apple.com/cn/app/%E7%9C%81%E9%92%B1%E5%B0%8F%E5%8D%96%E9%83%A8/id1600413498'
					} else if (isAndroid) {
						window.location.href = androidUrl;
					}
				}
			},
			hide(){
				this.popshow = false;
			},
			isPhoneAvailable(str) {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			},
			getVerifyCode() {
				if (this.showCount) { return }
				let custom_phone = this.phoneNumber;
				let time = 60;
				let isPhone = this.isPhoneAvailable(custom_phone)
				if (custom_phone == '') {
					this.showToast = true
					this.msg = '请输入手机号'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
				} else {
					if (isPhone) {
						let params = {
							phone: this.phoneNumber,
							type: 'register_account'
						}
						service({
							url: 'sms/code',
							method: 'post',
							data: JSON.stringify(params)
						}).then(res => {
							this.sms_key = res.key;
							this.showCount = true;
							this.countTime = time;
							this.setCountTime(time)
						})
						
					} else {
						this.showToast = true
						this.msg = '请输入正确的手机号'
						setTimeout(() => {
							this.showToast = false
						}, 1000)
					}
				}
			},
			setCountTime(time) {
				let count = setInterval(() => {
					time = time - 1
					this.countTime = time
					if (this.countTime == 0) {
						this.showCount = false
						this.countTime = null
						clearInterval(count)
					}
				}, 1000)
			},
			handleClick(e) {
				this.agreement = e.target.checked
			},
			registeApi(params) {
				return service({
					url: 'users',
					method: 'post',
					data: JSON.stringify(params)
				})
			},
			registeNow() {
				if (this.phoneNumber == '') {
					this.showToast = true
					this.msg = '请输入手机号'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
				} else if (this.sms_code == '') {
					this.showToast = true
					this.msg = '请输入验证码'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
				} else if (this.password == '') {
					this.showToast = true
					this.msg = '请输入密码'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
				} else if (!this.agreement) {
					this.showToast = true
					this.msg = '请阅读注册协议及隐私协议并同意！'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
				}else if (this.invite_code == null) {
					this.confirmShow = true
				}else {
					let params = {
						phone: this.phoneNumber,
						sms_key: this.sms_key,
						sms_code: this.sms_code,
						password: this.password,
						invite_code: this.invite_code,
						agreement: 1
					}
					this.registeApi(params).then(res => {
						this.showToast = true
						this.msg = '注册成功！'
						setTimeout(() => {
							this.showToast = false
						}, 1000)
						this.confirmShow = false
					})
				}
			},
			confirm(){
				let params = {
					phone: this.phoneNumber,
					sms_key: this.sms_key,
					sms_code: this.sms_code,
					password: this.password,
					invite_code: this.invite_code,
					agreement: 1
				}
				this.registeApi(params).then(res => {
					this.showToast = true
					this.msg = '注册成功！'
					setTimeout(() => {
						this.showToast = false
					}, 1000)
					this.confirmShow = false
				})
			},
			cancle(){
				this.confirmShow = false
			}
		}
	})
</script>
</body>

</html>
